<html>
    <head>
        <title>快速上手</title>
    </head>
    <body>
        <script>
             /*
                         五、 快速上手

                                                        
                                  1、新建 nvue页面

                                          在HBuilderX 的uni-app 项目中，新建页面，弹出界面右上角可以选择是新加 vue页面还是 nvue页面，后者 2个同时创建。

                                          不管是vue 页面还是 nvue 页面，都需要在 pages.json 中注册。 如果在 HBuilderX 中新建页面时会自动注册的，如果使用其他编辑器，则需自行在 pages.json里注册。

                                          如果一个页面路由下同时有vue 页面和 nvue 页面，级出现同名的 vue 和 nuve 文件。那么在App端，会仅使用 nvue页面，同名的vue页面将不会被编译到App端。

                                          而在非App页面，会优先使用 vue页面。

                                          如果不同名，只有nvue页面，则在非app端，只有uni-app编译模式的nvue文件才会编译。


                                  2、开发 nvue页面

                                         nvue页面结构同 vue ,由  template、style、script 构成。

                                         ①、template： 模板写法、数据绑定，与Vue一样。组件支持两种模式：

                                                weex组件，同weex写法，参考：http://emas.weex.io/zh/docs/components/a.html

                                                uni-app组件，同uni-app写法。

                                                App端 nvue专用组件，详见： https://uniapp.dcloud.io/component/barcode

                                         ②、style: 由于采用原生渲染，并非所有浏览器的css君支持，布局模型只支持flex布局，虽然不会造成某些界面布局无法实现，但写法要注意。

                                         ③、script: 写法同 vue,并支持3种API：

                                                nvue API:  仅支持App端，uni-app 编译模式也可以使用。使用前需要先引入对应模块，参考：模块引入  https://zh.uniapp.dcloud.io/tutorial/nvue-api.html

                                                uni API：  https://uniapp.dcloud.io/api/README

                                                plus API:  仅支持App端。 http://www.html5plus.org/doc/h5p.html


                                 3、调试 nvue页面

                                                 HBuilderX 内置了 weex 调试工具的强化版，包括审查界面元素、看 log、debug 打断点，详见   https://uniapp.dcloud.net.cn/tutorial/debug/debug-app.html
                                                 
                                  
                                                 
                                 4、render-whole

                                                在 HBuilderX 3.1.0 起版本， nvue 新增 render-whole 属性，类型 Boolean。

                                                ★、设置 render-whole="true"时，视图层将组件以及子组件的信息结构一次性和原生层通讯，通过整个节点的重绘提升了排版渲染性能。     
                                                
                                                ★、设置 render-whole="false"时，视图层将以子节点一个接着一个和原生层通讯再重绘。总体的渲染时间可能更久。


                                                默认启用render-whole为true的组件列表：

                                                        text
                                                        cell
                                                        header
                                                        cell-slot
                                                        recycle-list


                                                使用：
                                                        <swiper :render-whole="true"></swiper>
                    */
        </script>
    </body>
</html>